<template>
  <div class="public_header">
    <van-nav-bar fixed :class="{ 'header-scrolled': isScrolled }">
      <template #title>
        <div class="title">
          {{ headerTitle }}
        </div>
      </template>

      <!-- 动态控制右侧分享图标的显示 -->
      <template v-if="showShareIcon" #right>
        <div @click="shareFn" class="iconfont icon-fenxiang08-F upload"></div>
      </template>

      <template #left>
        <div
          v-if="showBackButton"
          @click="onClickLeft"
          class="iconfont icon-back"
        ></div>
        <div @click="$router.go(-1)" v-else class="iconfont icon-close"></div>
      </template>
    </van-nav-bar>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from "vue";
import { useRoute, useRouter } from "vue-router";

// 使用 useRouter 和 useRoute
const router = useRouter();
const route = useRoute();

// 状态变量
const showShare = ref(false);
const headerTitle = ref("");
const isScrolled = ref(false);
const showShareIcon = ref(true);
const showBackButton = ref(true);

// 滚动事件处理
const handleScroll = () => {
  isScrolled.value = window.scrollY > 50 || !!headerTitle.value;
};

onMounted(() => {
  window.addEventListener("scroll", handleScroll);
});

onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll);
});

// 路由监听
watch(
  () => route.query,
  (newQuery) => {
    // 重置所有显示状态（重要！）
    showShareIcon.value = true;
    showBackButton.value = true;
    headerTitle.value = "";

    // 动态生成标题
    if (newQuery.data) {
      showShareIcon.value = false;
      showBackButton.value = false;
      return;
    }
    if (newQuery.text && newQuery.total) {
      headerTitle.value = `${newQuery.text} (${newQuery.total})`;
      showShareIcon.value = false; // 隐藏分享图标
    } else if (newQuery.title) {
      headerTitle.value = newQuery.title; // 更新标题为 query.title
      showShareIcon.value = true; // 默认显示分享图标
    } else {
      headerTitle.value = ""; // 清空标题
      showShareIcon.value = true; // 默认显示分享图标
    }

    // 更新滚动状态
    isScrolled.value = !!headerTitle.value || window.scrollY > 50;
  },
  { immediate: true }
);

// 返回按钮逻辑
const onClickLeft = () => {
  if (window.history.length > 1) {
    router.go(-1);
  } else {
    router.push("/"); // 跳转到首页
  }
};

// 打开分享面板
const shareFn = () => {
  showShare.value = !showShare.value;
};
</script>

<style lang="less" scoped>
.public_header {
  ::v-deep(.van-nav-bar) {
    z-index: 999;
    background-color: transparent;
    &.header-scrolled {
      background: rgba(255, 255, 255, 1);
      .iconfont {
        background: transparent;
        color: #000;
        font-size: 18px;
      }
    }

    &::after {
      display: none;
    }

    .van-nav-bar__content {
      min-height: 48px;
      .van-nav-bar__title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .iconfont {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 20px;

    &.icon-back {
      left: 15px;
      padding-left: 5px;
      box-sizing: border-box;
    }

    &.upload {
      right: 15px;
    }
  }

  ::v-deep(.van-share-sheet) {
    .van-share-sheet__header {
      border-bottom: 1px solid #e5e7eb;

      .van-share-sheet__title {
        font-size: 18px;
        font-weight: bold;
      }
    }

    .van-share-sheet__options {
      justify-content: space-around;

      .van-share-sheet__option {
        img {
          border-radius: 12px;
          object-fit: cover;
        }
      }

      &.van-share-sheet__options--border {
        justify-content: start;

        &::before {
          display: none;
        }

        .van-haptics-feedback i {
          font-size: 25px;
          font-weight: 900;
        }
      }
    }
  }
}
.icon-close {
  font-size: 28px !important;
  font-weight: bold;
}
</style>